<template>
	
	<view class="content">
		
		<block v-for="(item, index) in list" :key="index">
			<view class="shopCar_box">
				<view class="choose_box">
					<view class="chooes_img_box" v-if="item.status == 1" @click="clickButton('singel',index, 0)">
						<image class="chooes_img" src="../../../static/img/shopcar/choose.png"></image>
					</view>
					<view class="chooes_img_box chooes_img_boxsss" v-if="item.status == 0" @click="clickButton(index, 1)">
						<!-- <image class="chooes_img" src="../../../static/img/shopcar/choose.png"></image> -->
					</view>
				</view>
				
				<view class="shop_logo_box">
					<image :src="item.image" class="shop_logo_img"></image>
				</view>
				
				<view class="shop_info_box">
					<view class="shop_name">{{item.title}}</view>
					<view class="shop_size">尺寸：{{item.skuName}}</view>
					<view class="shopgoods_price_box">
						<view class="goods_price">￥{{item.price}}</view>
						<view class="add_del_box">
							<!-- <view class="del_box">-</view>
							<view class="num_num">1</view>
							<view class="add_box">+</view> -->
							<u-number-box
								name="sfiec"
								v-model="item.goods_num" 
								@change="valChange"
								buttonSize="23"
								inputWidth="30"
								min="0"
								:disabledInput="true"
								:shopcarid="item.id"
							></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</block>
	
		<u-empty
			:show="empty"
		    mode="car"
		    icon="http://cdn.uviewui.com/uview/empty/car.png"
		>
		</u-empty>
	
		<!-- 支付按钮 -->
		<view class="button_box">
			<view class="pay_all_chooes_box">
				<view class="pay_left" @click="clickButton('allChoose')">
					<view class="all_chooes_img"></view>
					<view class="pay_chooes_name">全选</view>
				</view>
					
				<view class="pay_right">
					<view class="pay_all_money_box">
						<view class="pay_money_name">合计：</view>
						<view class="pay_money">￥276.00</view>
					</view>
					
					<view class="button_box_pay">
						去结算(2)
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import HostConfig from '@/utils/host.js';
	import Host from '@/utils/api.js';
	export default {
		data(){
			return{
				list: [], //购物车列表
				goods_num: 1, //购物车列表商品数量
				empty: false, //显示内容为空
			}
		},
		onLoad(){
			let that = this;
			uni.request({
				url: Host.ApiGetShopCarList.url, //仅为示例，并非真实接口地址。
				method: 'GET',
				data: {
					// openid: getApp().globalData.openid,
					openid: 1,
				},
				success: (res) => {			
					let hostUrl = HostConfig.service.host;
					that.list = res.data.result;
					if(that.list.length == 0){
						that.empty = true;
					}
				}
			});
		},
		methods:{
			valChange(data){
				let that = this;
				uni.request({
					url: Host.ApiShopCarOpent.url, //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						// openid: getApp().globalData.openid,
						openid: 1,
						goods_num: data.value,
						id: data.id
					},
					success: (res) => {			
						if(data.value == 0){
							uni.request({
								url: Host.ApiGetShopCarList.url, //仅为示例，并非真实接口地址。
								method: 'GET',
								data: {
									// openid: getApp().globalData.openid,
									openid: 1,
								},
								success: (res) => {			
									let hostUrl = HostConfig.service.host;
									that.list = res.data.result;
									if(that.list.length == 0){
										that.empty = true;
									}
								}
							});
						}
					}
				});
				
			},
			clickButton(param, index, status){
				if(param = 'singel'){
					this.list[index]['status'] = status;
					return;
				}
				if(param = 'allchoose'){
					this.list.map((value, i) =>{
						this.list[i]['status'] = 1;
						console.log(value);
						return;
					})
				}
			}
		}
	}
</script>

<style>
	page{
		background: #F6F8F9;
	}
	.shopCar_box{
		width: 684upx;
		height: 296upx;
		background: #FFFFFF;
		display: flex;
		padding: 48upx 22upx 50upx 20upx;
		align-items: center;
		/* border: #007AFF solid 2upx; */
		/* margin-bottom: 24upx; */
		margin: 0 auto 24upx auto;
		border-radius: 8upx;
		box-sizing: border-box;
	}
	.chooes_img_boxsss{
		border: 2upx solid #979797;
		box-sizing: border-box;
		border-radius: 36upx;
	}
	.chooes_img_box{
		width: 36upx;
		height: 36upx;
	}
	.chooes_img{
		width: 36upx;
		height: 36upx;
	}
	
	.shop_logo_box{
		width: 200upx;
		height: 200upx;
		margin-left: 16upx;
	}
	
	.shop_logo_img{
		width: 200upx;
		height: 200upx;
	}
	
	.shop_info_box{
		margin-left: 28upx;
	}
	
	.shop_name{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	
	.shop_size{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
		margin-top: 12upx;
	}
	
	.shopgoods_price_box{
		display: flex;
		margin-top: 30upx;
		justify-content: space-between;
	}
	
	.goods_price{
		font-size: 32upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FF5638;
		line-height: 40upx;
	}
	
	.add_del_box{
		display: flex;
	}
	
	.del_box{
		width: 46upx;
		height: 46upx;
		background: #EDEDED;
		border-radius: 4upx 0upx 0upx 4upx;
		opacity: 0.4;
		box-sizing: border-box;
		text-align: center;
	}
	.num_num{
		width: 60upx;
		height: 46upx;
		background: #F5F5F5;
		

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 44upx;
		
		margin-left: 2upx;
		margin-right: 2upx;
		text-align: c;
	}
	
	.add_box{
		width: 46upx;
		height: 46upx;
		background: #EDEDED;
		border-radius: 4upx 0upx 0upx 4upx;
		opacity: 0.4;
		box-sizing: border-box;
		text-align: center;
	}
	
	.button_box{
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 100%;
		
		/* padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); */
	}
	
	.pay_all_chooes_box{
		padding: 28upx 28upx 28upx 28upx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		line-height: 128upx;
		align-items: center;
		box-sizing: border-box;
	}
	
	.pay_left{
		/* width: 118upx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.all_chooes_img{
		width: 36upx;
		height: 36upx;
		border: 2upx solid #979797;
		border-radius: 45upx;
	}
	.all_img{
		width: 36upx;
		height: 36upx;
	}
	
	.pay_chooes_name{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
		margin-left: 26upx;
	}
	
	.pay_right{
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* width: 464upx; */
	}
	
	.pay_all_money_box{
		display: flex;
		align-items: baseline;
	}
	
	.pay_money_name{
		font-size: 24upx;
		color: #333333;
	}
	
	.pay_money{
		color: #FF5739;
		font-size: 40upx;
	}
	
	.button_box_pay{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80upx;
		width: 240upx;
		height: 80upx;
		background: #FF5739;
		border-radius: 8upx;
		text-align: center;
		margin-left: 26upx;
	}
</style>
